<template>
  <div>
    <ul>
      <!-- 
         v-for用来动态的渲染列表的指令
       -->
      <li v-for="item in proviceList" :key="item">{{item}}</li>
    </ul>
    <hr>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>学号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>电话</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 
          v-for的语法
          v-for="(项变量,当前项所在的下标位置) in 集合"
          下标位置是从0开始的
         -->
        <tr v-for="(item,index) in students" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.sid}}</td>
          <td>{{item.sname}}</td>
          <td>{{item.age}}</td>
          <td>{{item.telephone}}</td>
          <td>{{item.address}}</td>
          <td>
              <button>查看</button><button>删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <hr>
    <ol>
      <li v-for="(item,index) in stars" :key="index">
        <h3>{{item.name}}</h3>
        <ul>
          <li v-for="(sitem,sindex) in item.sings" :key="sindex">
            {{sitem.name}}
          </li>
        </ul>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  data(){
    return{
      proviceList:['西藏','宁夏','陕西','北京','天津','重庆','四川'],
      students:[
        {
          sid:'1001',
          sname:'刘备',
          age:33,
          telephone:'13324567890',
          address:'凤城一路'
        },
        {
          sid:'1002',
          sname:'关羽',
          age:33,
          telephone:'13324567890',
          address:'凤城一路'
        },
        {
          sid:'1003',
          sname:'张飞',
          age:33,
          telephone:'13324567890',
          address:'凤城一路'
        },
        {
          sid:'1004',
          sname:'赵云',
          age:33,
          telephone:'13324567890',
          address:'凤城一路'
        },
        {
          sid:'1005',
          sname:'马超',
          age:32,
          telephone:'13324567890',
          address:'凤城一路'
        }
      ],
      stars:[
        {
          id:'1001',
          name:'李荣浩',
          sings:[
            {
              sid:'s1001',
              name:'李白'
            },
            {
              sid:'s1002',
              name:'王妃'
            }
          ]
        },
        {
          id:'1002',
          name:'张学友',
          sings:[
            {
              sid:'s2001',
              name:'吻别'
            },
            {
              sid:'s2002',
              name:'最真心的朋友'
            }
          ]
        }
      ]
    }
  }
}
</script>

<style>
  table{
    border-collapse: collapse;
  }
  thead tr{
    background-color: #ccc;
  }
  td,th{
    border: 1px solid #000;
    padding: 10px;
    text-align: center;
  }
</style>